<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3-1-2-按钮组</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>


<!-- 基本按钮组 -->
	<div class="container">
		<div class="btn-group">
			<button type="button" class="btn btn-default">left </button>
			<button type="button" class="btn btn-default">moddle </button>
			<button type="button" class="btn btn-default">right </button>
		</div>
	</div>


<!-- 左中右按钮组 -->
		<div class="btn-toolbar">
			<div class="btn-group">
				<button type="btn" class="btn-default">
					<span class="glyphicon glyphicon-align-left"></span>
				</button>

				<button>
					<span class="glyphicon glyphicon-align-left"></span>
				</button>
			</div>

			<div class="btn-group">
				<button type="btn" class="btn-default">
					<span  class="glyphicon glyphicon-align-center"></span>
				</button>
			</div>

			<div class="btn-group">
				<button type="btn" class="btn-default">
					<span  class="glyphicon glyphicon-align-right"></span>
					<span  class="glyphicon glyphicon-align-right"></span>
				</button>
			</div>

		</div>


<hr>
	
<!-- 小中大按钮 -->
	<div class="container">
		<div class="btn-group btn-group-xs">
			<button type="button" class="btn btn-default">xs--特小按钮</button>
		</div>

		<div class="btn-group btn-group-sm">
			<button type="button" class="btn btn-default">sm--小按钮</button>
		</div>

		<div class="btn-group ">
			<button type="button" class="btn btn-default">大小默认按钮</button>
		</div>

		<div class="btn-group btn-group-lg">
			<button type="button" class="btn btn-default">lg--大按钮</button>
		</div>
	</div>

	
	<!-- 下拉菜单+按钮组 -->
	
	<button class="btn-group">
		<button class="btn btn-default" type="button">11</button>
		<button class="btn btn-default" type="button">22</button>
		
		<div class="btn-group">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			下拉菜单<span class="caret"></span>
			</button>

			<ul class="dropdown-menu" role="menu" >
				<li><a href="#">点我</a></li>
				<li><a href="#">点我</a></li>

			</ul>

		</div>			


	</button>

<br><br>
<!-- 垂直属性 -->
	
	<div class="container">
		<div class="btn-group-vertical">
			<button type="button" class="btn btn-default"> -vertical 上 </button>
			<button type="button" class="btn btn-default"> -vertical 中 </button>
			<button type="button" class="btn btn-default"> -vertical 下 </button>
		</div>
	</div>

	
	<div class="btn-group btn-group-justified">
		<div class="btn-group">
			<button type="button" class="btn btn-default">全屏left</button>
		</div>

		<div class="btn-group">
			<button type="button" class="btn btn-default">全屏center</button>
		</div>

		<div class="btn-group">
			<button type="button" class="btn btn-default">全屏right</button>
		</div>

	</div>










<br><br><br><br><br>
<!-- 引入本地文件 bootstrap基于JQ上运行，需加载JQ文件-->
<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
	
</body>
</html>